<template>
	<view>
		<search-bar></search-bar>
		<swiper style="height: 56vw;" autoplay>
			<swiper-item @tap="linkJump(item.jump_url)" v-for="(item,index) in carouselList" :key="index">
				<image :src="item.img_url" class="image" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<u-notice-bar mode="horizontal" :list="shopNotice"></u-notice-bar>
		<view class="modal-window">
			<view @tap="linkJump(item.jump_url)" v-for="(item,index) in modalList" :key="index"
				:style="{width: `${item.width}%`}">
				<u-image :fade="false" :src="item.img_url" width="100%" mode="widthFix"></u-image>
			</view>
		</view>
		<agree />
		<product-list ref="productList" :productList="productList"></product-list>
	</view>
</template>

<script>
	import Empty from '../../components/empty/empty.vue'
	export default {
		components: {
			Empty
		},
		data() {
			return {
				carouselList: [],
				modalList: [],
				productList: [],
				page: 0,
				shopNotice: [], //首页公告

			}
		},
		onLoad(data) {
 
			let shop_id = data.shop_id;
			if (data.shop_id) {
				// uni.setStorageSync('shopId',shop_id);
				uni.setStorage({
					key: 'shopId',
					data: data.shop_id,
				})
			}
			if (data.scene) {
				let query = this.$getRequestParameters(decodeURIComponent(data.scene))
				let sn = query.sn;

				if (sn) {
					this.$store.commit('setSn', {
						ref_sn: sn
					})
				} else {
					console.log('无sn')
				}



			}
		},
		computed: {
			loginAction() {
				return this.$store.state.login.loginAction
			},
		},
		onShow() {

			if (this.loginAction) {

				this.productList.splice(0);
				this.$refs.productList.clearAll();
				this.carouselList.splice(0);
				this.modalList.splice(0);

				this.page = 0;
				this.loadIndex();
				this.loadProduct();
				this.loadUserDetail();
				this.$store.commit('setLoginAction', {
					loginAction: false,
					_this: this,
				});

			}
		},
		onReady() {
			this.loadIndex();
			this.loadProduct();
			this.loadUserDetail();
		},
		onReachBottom() {
			this.loadProduct();
		},
		methods: {
			//加载个人资料
			loadUserDetail() {
				this.$api2('UserCenter/index').then(data => {
					if (data.status == 1) {
						this.$store.state.goods.service_phone = data.data.service_phone;
						this.$store.commit('addSpecialPay', data.data.special_wallet_pay)

					} else {
						this.$showToast(data.msg);
					}
				});
			},
			linkJump(url) {
				uni.navigateTo({
					url: url
				})
			},

			//加载商品列表
			loadIndex() {
				this.$api('Index/index').then(data => {
					if (data.status == 1) {
						uni.setNavigationBarTitle({
							title: data.data.shop_name
						});
						this.carouselList = data.data.carousel;
						this.modalList = data.data.module;
						// this.shopNotice.push(data.data.shop_notice);
						this.shopNotice = this.shopNotice.concat(data.data.shop_notice);
					} else {
						this.$showToast(data.msg);
					}
				})
			},
			loadProduct() {
				this.page = this.page + 1;
				let params = {
					page: this.page,
					limit: 10
				};
				this.$api('Product/lists', params).then(data => {
					if (data.status == 1) {

						// this.productList = data.data.product;
						let list = data.data.product;
						for (let m in list) {
							this.productList.push(list[m]);
						}
					} else {
						this.$showToast(data.msg);
					}
				})
			}
		}
	}
</script>

<style>
	.modal-window {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
</style>